<!DOCTYPE html>
<html>

<head>
<title>Game of Life</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../build/js/Cindy.js"></script>
<script id="csinit" type="text/x-cindyscript">
n=30;
sq(i,j,col):=(
  fillpoly(((i,j),(i+1,j),(i+1,j+1),(i,j+1)),color->col);
);
m=zeromatrix(n,n);

   repeat(n,i,
     repeat(n,j,
       m_i_j=round(random());
     );
   );

mo(x):=mod(x-1,n)+1;

mmo(i,j):=m_(mo(i))_(mo(j));

neigh(i,j):=
  mmo(i-1,j-1)+
  mmo(i,j-1)+
  mmo(i+1,j-1)+
  mmo(i+1,j)+
  mmo(i+1,j+1)+
  mmo(i,j+1)+
  mmo(i-1,j+1)+
  mmo(i-1,j);

cf(i,j):=if(m_i_j==1,hue(neigh(i,j)/8)*.6,(1,1,1));

drawm():=(
   repeat(n,i,
     repeat(n,j,
       //draw((i,j),color->cf(m_i_j),size->8);
       sq(i,j,cf(i,j));
     )
   )
);




life(i,j):=(
 nei=neigh(i,j);
 if(or((m_i_j==1)&(or(nei==2,nei==3)),
       m_i_j==0 & nei==3),
    1,0
       );
);

next():=(
 m=apply(1..n,i,apply(1..n,j,life(i,j)));
);

reset() := (
  m=zeromatrix(n,n);
  repeat(n,i,
    repeat(n,j,
      m_i_j=round(random());
    );
  );
);

reset();
</script>
<script id="csdraw" type="text/x-cindyscript">
drawm();
</script>
<script id="cstick" type="text/x-cindyscript">
next();
</script>
<script type="text/javascript">

var cdy = CindyJS({ // See ref/createCindy documentation for details.
  canvasname: "CSCanvas",
  scripts: "cs*",
  language: "en",
  defaultAppearance: { },
  transform: [{ scaleAndOrigin: [16.31801400276081, 123, -14] }]
});

// Remove all comments after adjusting this template for your use case.

</script>
</head>

<body style="font-family:Arial;">
  <div id="CSCanvas" style="width:705px; height:507px; border:2px solid black; background-color:rgb(168,176,192)"></div>
  <p>
    <button onclick="cdy.play()" type="button">Play</button>
    <button onclick="cdy.stop()" type="button">Stop</button>
    <button onclick="cdy.stop();cdy.evokeCS('reset()')" type="button">Reset</button>
  </p>
</body>

</html>
